<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2021/3/11
  Time: 19:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ include file="../../common/commonLib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <title>平均得分</title>
    <!-- 引入 echarts.js -->
    <script src="../../js/echarts.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        body::-webkit-scrollbar {
            display: none;
        }
        #main {
            width: 100%;
            height: 100vh;
            position: relative;
        }
        #main .title {
            position: absolute;
            top: 50px;
            width: 100vw;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
            padding: 0;
            font-size: 25px;
            font-weight: 900;
        }

        .content {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid black;
            border-radius: 10px;
            padding: 20px;
        }
        .back{
            position: fixed;
            top: 40px;
            right: 100px;
        }
    </style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main">
    <button type="button" class="btn btn-default back" aria-label="Left Align" onclick="javascript:history.back(-1);">
        <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
    </button>
    <div class="title">平均得分</div>
    <div class="content">
        <div id="main1" style="width: 600px;height:400px;"></div>
    </div>
</div>

<script type="text/javascript">
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    var option;

    var colors = ['#5470C6', '#EE6666'];

    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
                dataView: {show: true, readOnly: true},
                saveAsImage: {show: true}
            }
        },
        legend: {
            data: ['平均分', '回答人数']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: ${allTaskNames}
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '得分',
                min: 0,
                max: 100,
                position: 'right',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '人数/个',
                min: 0,
                max: 100,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '平均分',
                type: 'bar',
                data: ${allAvgScores}
            },
            {
                name: '回答人数',
                type: 'line',
                yAxisIndex: 1,
                data: ${allAnsNums}
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</body>
</html>